<template lang="pug">
.order_content
    .orderCart
        table(:style="{'pointer-events': IsVerlay&&UserOrderCartData.length>0 ?  'none':'auto' }") OrderCart
            tr
                th order_id
                th amount
                th cart_items
                th total_price
                th state
                th modified_time

            tr(v-for="(value,index) in  UserOrderCartData" :key="index")
                td  {{value.order_id}}
                td  {{value.amount}}
                td
                    span(v-for="(item,index) in value.cart_items" ) -{{index}}-
                td  {{value.total_price?value.total_price:0 }}
                td  {{ orderCartState(value.order_state)}}
                td  {{value.modified_time}}
                td(v-show="IsFinish(value.order_state)" )
                    .cancelBtn(@click="ToCancelOrder(value.order_id)") ×
                td(v-show="IsFinish(value.order_state)" )
                    .confirmBtn(@click="WantToPay(index)") √

    .overlay_content(v-if="IsVerlay&&UserOrderCartData.length>0")
        p.pay_title Pay
        .pay_content
            .pay_content_card
                div(v-for="(v,cart_id) in UserOrderCartData[OrderTempIndex].cart_items")
                    GameItemIdCard(:appid="Number(cart_id)")
                .pay_price
                    div Total Price ==> {{UserOrderCartData[OrderTempIndex].total_price}}
            .ScanToPay Scan To Pay
                img.pay_code(:src="payCodeImg")
        .pay_btn
            .pay_cancel(@click="IsVerlay=!IsVerlay") Click To Close
            .confirmBtn(@click="ToConfirmOrder(UserOrderCartData[OrderTempIndex].order_id)") Click To Confirm

</template>

<script lang="ts" setup>

import {onMounted, ref} from "vue";
import type {ResultInfo} from "../../utils/types/ResultInfo";
import {LogSuccess} from "../../utils/notification/Index";
import type {OrderCart} from "../../utils/types/Cart";
import {UserOrderCartCancel, UserOrderCartConfirm, UserOrderCartGet} from "../../reqApi/UserCart";
import GameItemIdCard from "../utils/game/GameItemIdCard.vue";
import {useRouter} from "vue-router";


const router = useRouter()
const UserOrderCartData = ref<OrderCart[]>([])
const orderCartState = (state: number): string => {
    switch (state) {
        case 0:
            return "WAIT";
        case 1:
            return "CANCEL-FINISH";
        default:
            return "FINISH";
    }
}
const IsFinish = (state: number): boolean => {
    switch (state) {
        default :
            return false
        case 0:
            return true
    }
}
const ToCancelOrder = (order_id: string) => {

    UserOrderCartCancel({
        order_id: order_id
    }).then(resp => {
        const result = resp.data as ResultInfo<any>
        LogSuccess(result.msg)
    })
    router.go(0)

}

const WantToPay = (order_id: number) => {
    OrderTempIndex.value = order_id
    IsVerlay.value = true
    payCodeImgHandle()
}
const ToConfirmOrder = (order_id: string) => {
    UserOrderCartConfirm({
        order_id: order_id
    }).then(resp => {
        const result = resp.data as ResultInfo<boolean>
        LogSuccess(result.msg)
    })
    router.go(0)
}
const IsVerlay = ref(false)
const OrderTempIndex = ref(0)
const payCodeImg = ref("data:image/jpeg;base64,")


const payCodeImgHandle = () => {
    let item = localStorage.getItem("UserOrderCart");

    // 字符串转字节数组
    // function stringToBytes(str) {
    //     const encoder = new TextEncoder();
    //     return encoder.encode(str);
    // }

    if (item) {
        payCodeImg.value = "data:image/jpeg;base64," + item;
    }

}
onMounted(() => {
    UserOrderCartGet().then(resp => {
        const result = resp.data as ResultInfo<OrderCart[]>
        if (result.success) {
            UserOrderCartData.value = result.data || []
        }
        LogSuccess(result.msg)
    })
})

</script>
<style lang="sass" scoped>
@import "../../assets/sass/user/orderCart"


</style>
